<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
	//["javascript","jQuery"]
//ajax获取的数组
var data=[
	{title:"javascript",children:[
		{title:"1、javascript入门"},
		{title:"2、ECMA语法",children:[
			{title:"2.1 变量"},
			{title:"2.2 数据类型",children:[
				{title:"2.2.1 字符串"},
				{title:"2.2.2 数组",children:[
					{title:"2.2.2.1 for...in"}
				]}
			]}
		]}
	]},
	{title:"jQuery",children:[
		{title:"1、jQuery基础"},
		{title:"2、jQuery高级",children:[
			{title:"2.1 动画与特效"},
			{title:"2.2 Ajax"}
		]}
	]}

]
/*
1、动态生成ul
2、for遍历数据
3、动态创建li
4、设置li内容
5、将li放进ul里
5.5将ul放进body

6、判断是否有数据
7、动态生成ul
8、for遍历数据
9、动态创建li
10、设置li内容
11、将li放进ul里
11.5 将ul放进外层li

6、判断是否有数据
7、动态生成ul
8、for遍历数据
9、动态创建li
10、设置li内容
11、将li放进ul里
*/
function tree(data,ul){//d->数组
	for(var i=0;i<data.length;i++){
		var li=document.createElement("li");
		li.innerHTML=data[i].title;
		ul.appendChild(li);
		if(data[i].children){
			//有下级菜单，前面增加+号
			li.innerHTML="<i>+</i>"+li.innerHTML;
			var oul=document.createElement("ul");
			oul.style.display="none";
			tree(data[i].children,oul);
			li.appendChild(oul);
		}
	}
}

var jsList_1=document.createElement("ul");
tree(data,jsList_1);
document.body.appendChild(jsList_1);
var oi=document.getElementsByTagName("i");
for(var i=0;i<oi.length;i++){
	oi[i].onclick=function(){
		//点击的i标签父元素的第一个ul就是要控制的
		var next=this.parentNode.getElementsByTagName("ul")[0];
		if(this.innerHTML=="+"){
			this.innerHTML="-";
			next.style.display="";
		}else{
			this.innerHTML="+";
			next.style.display="none";
		}
	}
}
// for(var i=0;i<data.length;i++){//遍历数组，动态生成li
// 	var li_1=document.createElement("li");
// 	li_1.innerHTML=data[i].title;
// 	jsList_1.appendChild(li_1);
// 	if(data[i].children){
// 		var children=data[i].children;
// 		var jsList_2=document.createElement("ul");
// 		for(var j=0;j<children.length;j++){//2
// 			var li_2=document.createElement("li");
// 			li_2.innerHTML=children[j].title;
// 			jsList_2.appendChild(li_2);
// 			if(children[j].children){
// 				var children_1=children[j].children;
// 				var jsList_3=document.createElement("ul");
// 				for(var k=0;k<children_1.length;k++){//3
// 					var li_3=document.createElement("li");
// 					li_3.innerHTML=children_1[k].title;
// 					jsList_3.appendChild(li_3);
					
// 				}
// 				li_2.appendChild(jsList_3);
// 			}	
// 		}
// 		li_1.appendChild(jsList_2);
// 	}
// }
//onchange
//text 改变输入值，失去焦点之后触发
//select 更换选项触发
</script>	
</body>
</html>